<template>
  <div class="mainFrame">
    <el-container>
      <el-header class="sys_header">
        <sys-header @handleMenu="handleMenu"></sys-header>
      </el-header>
      <el-container>
        <el-aside width="auto">
          <el-scrollbar :height="asideH" class="menu-scrollbar">
            <sys-menu ref="sysMenuRef" @setTab="setTab" @setHomeInfo="setHomeInfo"></sys-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <sys-tab ref="sysTabRef" class="sys_tab" @menuScroll="menuScroll"></sys-tab>
          <el-scrollbar :height="mainH">
            <router-view v-slot="{Component}">
              <transition name="fade-right" mode="out-in">
                <keep-alive :include="include">
                  <component :is="Component"></component>
                </keep-alive>
              </transition>
            </router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup name="mainFrame">
  import sysHeader from './sysHeader.vue'
  import sysMenu from './sysMenu.vue'
  import sysTab from './sysTab.vue'
  import { initDictApi } from '@/api/api'
  import { ref, onMounted, nextTick, computed, getCurrentInstance } from 'vue'
  import { useStore } from 'vuex' 
  const store = useStore()

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  // 获取组件ref 
  const sysMenuRef = ref(null)
  const sysTabRef = ref(null)

  // 获取缓存页面数据
  let include = computed(() => {
    return store.state.include
  })

  let asideH = computed(() => {
    return store.state.asideH
  })

  let mainH = computed(() => {
    return store.state.mainH
  })

  initDict()
  function initDict() {
    initDictApi().then(res => {
      if(res.code === '200') {
        store.commit('dictData', res.data)
      } else {
        currentThis.$message.error(res.message)
      }
    })
  }

  function handleMenu(e) {
    sysMenuRef.value.collapse = e
  }

  // 左侧菜单滚动到指定锚点菜单位置
  function menuScroll(id) {
    let tops = $(`#${id}`).offset().top - 56 // 56为系统左侧菜单某个菜单的高度
    $('.menu-scrollbar>div').animate({
      scrollTop: tops
    }, 500)
  }

  function setTab(e) {
    sysTabRef.value.setTab(e)
  }

  //设置首页信息
  function setHomeInfo(e) {
    sysTabRef.value.homeInfo = e
  }

  function init() {
    const winH = document.documentElement.clientHeight
    const headerH = $('.sys_header').height()
    const tabsH = $('.sys_tab').height()
    store.commit('asideH', winH - headerH + 'px')
    store.commit('mainH', winH - headerH - tabsH + 'px')
  }

  onMounted(() => {
    init()
    window.addEventListener('resize', () => {
      nextTick(() => {
        init()
      })
    })
  })
</script>

<style lang="less" scoped>
.mainFrame{
  width: 100%;
  overflow: hidden;
  >.el-container{
    overflow: hidden;
    >.el-header{
      padding: 0 20px 0 10px;
      background: #021536;
    }
    >.el-container{
      overflow: hidden;
      >.el-aside{
        background: #1F244B;
      }
      >.el-main{
        background: #ffffff;
        padding: 0 0 0 0;
        overflow: hidden;
        // 进入后和离开前保持原位
        .fade-right-enter-to, .fade-right-leave-from{
          opacity: 1;
          transform: none;
        }
        
        // 设置进入和离开过程中的动画时长0.5s
        .fade-right-enter-active, .fade-right-leave-active{
          transition: all 0.5s;
        }
        
        // 进入前和离开后为透明，并在右侧20px位置
        .fade-right-enter-from, .fade-right-leave-to{
          opacity: 0;
          transform: translateX(20px);
        }
      }
    }
  }
}
</style>